<template>
  <div>
    <div class="arrvalnotice" id="pdfDom">
      <div id="one" align="center">
        <h1 style="font-size:25px;" align="center">Receipt</h1>
      </div>
      <div id="two" align="left">
        <svg id="barcode" />
      </div>
      <div id="three">
        <table align="center" cellspacing="0" cellpadding="1" width="100%" style="border-collapse:collapse;font-size:13px;">
          <tr>
            <td align="right" width="120px">
              <b>NoticeNumber</b>
            </td>
            <td style="padding-left:10px;">{{form.noticenumber}}</td>
            <td align="right" width="100px">
              <b>OrderNumber</b>
            </td>
            <td style="padding-left:10px;min-width:80px">{{form.ordernumber}}</td>
            <td align="right" width="120px">
              <b>WarehouseName</b>
            </td>
            <td style="padding-left:10px;min-width:80px">{{warehousename}}</td>
          </tr>
          <tr>
            <td align="right" width="120px">
              <b>Consignor</b>
            </td>
            <td style="padding-left:10px;">{{form.consignorname}}</td>
            <td align="right" width="100px">
              <b>Supplier</b>
            </td>
            <td style="padding-left:10px;min-width:80px">{{form.suppliername}}</td>
            <td align="right" width="120px">
              <b>PrintDate</b>
            </td>
            <td style="padding-left:10px;min-width:80px">{{printdate}}</td>
            <!-- <td align="right" width="60px"><b>Type</b></td>
            <td style="padding-left:10px;min-width:80px">{{form.typename}}</td>-->
          </tr>
          <tr>
            <td align="right" width="60px">
              <b>DeliveryCompany</b>
            </td>
            <td style="padding-left:10px;">{{form.deliverycompany}}</td>
            <td align="right" width="100px">
              <b>PlateNumber</b>
            </td>
            <td style="padding-left:10px;min-width:80px">{{form.platenumber}}</td>
            <td align="right" width="60px">
              <b>DeliveryMan</b>
            </td>
            <td style="padding-left:10px;min-width:80px">{{form.deliveryman}}</td>
          </tr>
          <tr>
            <td align="right" width="60px">
              <b>Contact</b>
            </td>
            <td style="padding-left:10px;">{{form.contact}}</td>
            <!-- <td align="right" width="100px"><b>{{$t('m.in.planeddate')}}</b></td> -->
            <!-- <td style="padding-left:10px;min-width:80px">{{form.planeddate}}</td> -->
          </tr>
          <tr>
            <td align="right" width="60px">
              <b>Remark</b>
            </td>
            <td colspan="5" style="padding-left:10px;">
              <p style="width:100%;word-break:break-all;">{{form.remark}}</p>
            </td>
          </tr>
        </table>
      </div>
      <div id="four">
        <TABLE align="center" border="1" cellspacing="0" cellpadding="1" width="100%" style="border-collapse:collapse;table-layout:fixed" bordercolor="#333333">
          <thead style="font-size:12px">
            <TR>
              <TD width="5%">
                <DIV align="center">
                  <b>NO.</b>
                </DIV>
              </TD>
              <TD width="15%">
                <DIV align="center">
                  <b>ZegoSKU</b>
                </DIV>
              </TD>
              <TD width="42%">
                <DIV align="center">
                  <b>ProductName</b>
                </DIV>
              </TD>
              <TD width="30%">
                <DIV align="center">
                  <b>Spec</b>
                </DIV>
              </TD>
              <TD width="8%">
                <DIV align="center">
                  <b>Actual Qty</b>
                </DIV>
              </TD>
            </TR>
          </thead>
          <tbody style="font-size:12px">
            <tr v-for="(item,i) in tableData" :key="i">
              <td align="center">{{i+1}}</td>
              <!-- <td align="center">
                <svg :id="'code'+item.productspeccode" />
              </td>-->
              <td align="center">{{item.productspeccode}}</td>
              <td align="center">{{item.productname}}</td>
              <!-- <td align="center">
                <p>
                  PD:
                  <span>{{pd}}</span>
                </p>
                <p>
                  EXP:
                  <span>{{exp}}</span>
                </p>
              </td>-->
              <td align="center">{{item.productspec}}</td>
              <!-- <td align="center">{{item.plannedquantity}}</td> -->
              <td align="center">{{item.actualquantity}}</td>
            </tr>
          </tbody>
        </TABLE>
      </div>
    </div>
    <div class="btns">
      <!-- <el-button type="primary" @click="saveEMF">{{$t('m.download')}}</el-button> -->
      <el-button type="primary" @click="PreviewMytable">{{$t('m.print')}}</el-button>
    </div>
  </div>
</template>

<script>
import common from '@/utils/common'
import { getLodop } from '@/utils/LodopFuncs'
import JsBarcode from 'jsbarcode'
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  name:'arrivalPrint',
  data(){
    return {
      arrivalnoticeid:null,
      pd:'',
      exp:'',
      printdate:'',
      warehousename:'',
      formLabelWidth:'120px',
      form:{},
      tableData:[],
      // barcodes: "",
      barcode_option:{
        displayValue:true, //是否默认显示条形码数据 //textPosition:'top', //条形码数据显示的位置
        background:'#fff', //条形码背景颜色
        width:'1px', //单个条形码的宽度
        height:'55px',
        fontSize:'22px' //字体大小
      },
      token:''
    }
  },
  methods:{
    init(){
      this.status_loading = true
      this.$axios({
        method:'get',
        url:`/arrivalnotice/print/${this.arrivalnoticeid}`,
        headers:{
          token:this.token
        }
      }).then(({ data }) => {
        this.form = data.arrivaleNotice
        this.form.planeddate = common.timestampSimple(
          data.arrivaleNotice.planeddate
        )
        //只打印有实际到货数量的单
        this.tableData = data.arrivalNoticeDetial.filter(v => {
          return v.actualquantity
        })
        /**
         * 保质期天数expirationnum;
         */
        /**
         * 禁收时效limitationofreceipt
         */
        this.tableData.forEach(ele => {
          if (ele.limitationofreceipt){
            let date = new Date()
            date.setDate(date.getDate() - ele.limitationofreceipt)
            this.pd = common.timestampSimple(date)
            if (ele.isexpiration === 1){
              if (ele.expirationnum){
                let date = new Date()
                date.setDate(
                  date.getDate() + ele.expirationnum - ele.limitationofreceipt
                )
                this.exp = common.timestampSimple(date)
              }
            } else {
              this.exp = '- -'
            }
          } else {
            this.pd = '- -'
            this.exp = '- -'
          }
        })
      })
    },
    printInit(){
      let LODOP = getLodop()
      //LODOP.SET_PRINT_PAGESIZE(1, 1380, 880, "");
      LODOP.PRINT_INIT('到货通知单')
      LODOP.SET_PRINT_PAGESIZE(1, '', '', '')//设置打印方向2横向1竖向
      let strStyle = '<style>table{width:100%;table-layout:fixed;}tbody td{padding:3px 10px;white-space: pre-line;word-break: break-all;word-wrap:break-word;overflow-wrap:break-word;}</style>'
      // word-break:break-word;word-wrap: break-word;font-family:'Myanmar3'

      let tableStyle = '<style> table,td,th {padding:0;vertical-align:top;min-height:24px}</style>'
      LODOP.ADD_PRINT_TABLE(
        340,
        '3%',
        '94%',
        650,
        strStyle + document.getElementById('four').innerHTML
      )
      LODOP.ADD_PRINT_HTM(
        30,
        '3%',
        '94%',
        109,
        document.getElementById('one').innerHTML
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1)
      LODOP.ADD_PRINT_HTM(
        60, //距离上面高度
        '3%',
        '94%',
        280, //元素高度
        document.getElementById('two').innerHTML
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1)
      LODOP.ADD_PRINT_TABLE(
        180,
        '3%',
        '94%',
        314,
        tableStyle + document.getElementById('three').innerHTML
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'LinkedItem', 1)
      LODOP.NewPageA()
      LODOP.ADD_PRINT_HTM(
        10,
        650,
        200,
        100,
        '<font color=\'#0000ff\' format=\'Num\'><span tdata=\'pageNO\'>' +
          'NO.##'+'</span>/<span tdata=\'pageCount\'>'+' Total : ##'+'</span></font>'
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'Horient', 1)
      LODOP.ADD_PRINT_HTM(
        1050,
        '3%',
        '94%',
        100,
        '<font><span>' + 'Signature:' + '</span></font>'
      )
      LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
      LODOP.SET_PRINT_STYLEA(0, 'Horient', 1)
    },
    PreviewMytable(){
      let LODOP = getLodop()
      this.printInit()
      LODOP.PREVIEW()
      // LODOP.PRINT(); 直接打印
      //LODOP.PRINTA(); 选择打印机打印
    },
    // saveEMF(){
    //   let LODOP = getLodop()
    //   this.printInit()
    //   // LODOP.SET_SAVE_MODE('FILE_PROMPT', '.png')
    //   LODOP.SAVE_TO_FILE('到货通知单' + this.form.noticenumber + '.png')
    // },
    saveEMF(){
      let code = this.form.noticenumber
      //导出的点击按钮在网页底部的时候 滚动轮在底部会将pdf导出不全
      let top = document.querySelector('#pdfDom')
      if (top != null){
        top.scrollIntoView()
        top = null
      }
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint:true
        // scale: 2 // 提升画面质量，但是会增加文件大小
      }).then(function (canvas){
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 592.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight){
          PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0){
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0){
              PDF.addPage()
            }
          }
        }
        PDF.save(code + '.pdf')
      })
    },
    barcode(){
      let barCode = this.form.noticenumber
      JsBarcode('#barcode', barCode, {
        format:'CODE128', //选择要使用的条形码类型
        height:60, //高度
        width:1.5, //设置条之间的宽度
        fontSize:14, //设置文本的大小
        text:barCode, //显示文本
        displayValue:true, //是否在条形码下方显示文字
        textPosition:'bottom', //设置文本的垂直位置
        //fontOptions: "bold italic", //使文字加粗体或变斜体
        background:'#fff', //设置条形码的背景
        font:'微软雅黑', //设置文本的字体
        //lineColor: "#2196f3", //设置条和文本的颜色。
        margin:15 //设置条形码周围的空白边距
      })
    },
    skuBarcode(){
      this.tableData.forEach(element => {
        let barCode = element.productspeccode
        JsBarcode('#code' + barCode, barCode, {
          format:'CODE128', //选择要使用的条形码类型
          height:30, //高度
          width:1, //设置条之间的宽度
          fontSize:12, //设置文本的大小
          text:barCode, //显示文本
          displayValue:true, //是否在条形码下方显示文字
          textPosition:'bottom', //设置文本的垂直位置
          //fontOptions: "bold italic", //使文字加粗体或变斜体
          background:'#fff', //设置条形码的背景
          font:'微软雅黑', //设置文本的字体
          //lineColor: "#2196f3", //设置条和文本的颜色。
          margin:0 //设置条形码周围的空白边距
        })
      })
    }
  },
  mounted(){
    let storageData = localStorage.getItem('storageData') ? JSON.parse(localStorage.getItem('storageData')) : ''
    localStorage.removeItem('storageData')
    if (!storageData) return this.callbackMessage('暂无可用信息')
    for (let key in storageData){ // 遍历赋值
      this[key] = storageData[key]
    }
    this.init()
    this.printdate = common.timestampSimple(new Date())
  },
  updated(){
    this.barcode()
    this.skuBarcode()
  }
}
</script>
<style lang="scss" scoped>
h1 {
  font-size: 30px;
  text-align: center;
}
.el-main {
  background-color: #fff;
}
.arrvalnotice {
  width: 1240px;
  padding: 10px;
  margin: 0 auto;
  background: #fff;
  padding-top: 30px;
  padding-bottom: 30px;
}
.size36 {
  font-size: 26px;
}
tr > td {
  padding: 8px 5px;
  white-space: pre-line;
  word-break: break-all;
  word-wrap: break-word;
  overflow-wrap:break-word;
}
#div2 {
  margin-bottom: 50px;
}
#div2 strong {
  display: block;
  margin-bottom: 50px;
}
#div2 table {
  height: auto;
}
#div2 table i {
  text-align: right;
}
table {
  font-size: 12px;
  text-align: left;
}
.arrivalItem {
  margin-top: 80px;
  border: 1px solid rgb(122, 114, 114);
  padding: 20px;
}
.block {
  border: 1px solid rgb(160, 158, 158);
}
#three {
  margin-bottom: 30px;
}
#three table td {
  vertical-align: top;
}
.btns {
  margin-bottom: 30px;
}
</style>